<template>
  <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      border
  >
    <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :align="column.align || 'left'"
    />
  </el-table>
</template>

<script setup>
import { defineProps } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

// 使用普通的对象字面量代替 TypeScript 接口
const props = defineProps({
  tableData: Array,
  columns: Array
});
</script>

<style lang="scss" scoped>
:deep(th.el-table__cell) {
  word-break: break-word;
  background-color: #f8f8f9;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}
</style>